<template lang="pug">
  .dashboard-side
    <!--点击设备展开页面后，页面右侧上方展示的Tab页签，用于切换树和地图-->
    ul.dashboard-tabs(v-show="!fullMap && isDevice")
      li
        .btn-style(
          :class="{active:dashboardActive==='map'}"
          @click="dashboardTab('map')") 地图
      li
        .btn-style(
          :class="{active:dashboardActive==='tree'}"
          @click="dashboardTab('tree')") 站点
    <!--若注释掉这一段，则点击图标后中间的图表部分就不展示了-->
    <!--DashboardTree.dashboard-tree(-->
      <!--ref="tree"-->
      <!--v-if="treeNodes.length"-->
      <!--v-show="dashboardActive==='tree'"-->
      <!--v-model="devices"-->
      <!--:treeNodes="treeNodes")-->
    DashboardMap.dashboard-map(
      v-show="dashboardActive==='map'"
      v-model="devices"
      :fullMap="fullMap"
      @openMap="openMap"
      @selectMarker="selectMarker"
      @changeAreaId="changeAreaId")
</template>

<script >
/**
 * @name DashboardSide 在线监控侧边栏
 * @author 陈可嘉
 * @description 包含地图和树
 * 只关注地图和树的联动
 * 和外层的数据交互只有选中的设备ID和地图的全屏状态
 */
import DashboardMap from './Map'
import DashboardTree from './Tree'

export default {
  name: 'DashboardSide',
  components: {
    DashboardMap,
    DashboardTree
  },
  props: {
    // 是否地图全屏的状态
    fullMap: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      // 当前活动的页面：地图还是树
      dashboardActive: 'map',
      // 树的节点内容，和设备树应该是同一个数据源，但现阶段是两个
      treeNodes: [],
      // 选中的设备ID
      devices: [],
      // 是否选择设备
      isDevice: false
    }
  },
  mounted () {
    this.getTreeData()
  },
  watch: {
    devices (data) {
      this.$emit('changeDevices', data)
    }
  },
  methods: {
    // 切换树和地图的TAB
    dashboardTab (tab) {
      this.dashboardActive = tab
    },
    // 读取树的数据
    getTreeData () {
      this.$get({
        url: 'pn/base/bizOrganization/orgTree',
        params: {
          businessId: 'MONITOR'
        }
      }).then((data) => {
        this.treeNodes = data.map(item => {
          return {
            ...item,
            name: item.isDevice ? `${item.userName || item.siteName || '-'}(${item.userCode || item.siteCode || '-'})` : item.name
          }
        })
      })
    },
    // 设备列表变成单设备
    changeDevices (devices) {
      this.devices = devices
    },
    // 设备列表变成多设备
    joinDevices (device) {
      this.devices.push(device)
    },
    // 通过地图选择设备
    selectMarker (device) {
      this.isDevice = true
      this.changeDevices([device])
      this.$refs.tree.treeRender([device.id])
      this.$emit('changeFullMap', false)
      this.$emit('changeDevices', device)
    },
    // 双击地图时地图全屏
    openMap () {
      this.$emit('changeFullMap', true)
      // 重置站点树搜索关键字
      this.$refs.tree.keyword = ''
    },
    // 单击分区获得分区id
    changeAreaId (value) {
      this.isDevice = false
      this.$emit('changeAreaId', value)
      this.$emit('changeFullMap', false)
    }
  }
}
</script>

<style lang="sass" scoped>
.dashboard-side
  width: 100%
  flex: 1
  display: flex
  flex-direction: column
.dashboard-tabs
  display: flex
  flex-direction: row
  position: relative
  background: #f5f5f5
  min-height: 42px
  li
    width: 100%
    height: 42px
    line-height: 42px
    text-align: center
    cursor: pointer
    .active
      background: #29a1f7
      color: #fff
.dashboard-tree
  flex: 1
.dashboard-map
  flex: 1
  width: 100%
</style>
